<template>
    <div class="task_module_wrapper">
        <div class="task_tab_box flex-row">
            <span :class="['tab', tab.key == activeKey && 'active']" @click="switchTab(tab)" v-for="tab in tabs"
                :key="tab.key">{{ tab.label }}</span>
        </div>
        <scroll-bar class="table_task">
        <!-- <scroll-bar class="table_task" @scroll="onScroll"> -->
            <!-- handleClickRow -->
            <table-list :bordered="false" :loading="loading" :handleClickRow="(row)=>{return {on:{click:event=>handleClickRow(row)}}}" :columns="columns" rowKey="id" :pagination="false" :data="list">
                <template slot="index" slot-scope="{ index }">
                    <span>{{ (form.page - 1) * form.size + index + 1 }}</span>
                </template>
            </table-list>
        </scroll-bar>
    </div>
</template>
<script>
import table from '@/mixins/table';
import { taskCoulumns } from './columns';
import {remoteTaskList} from '@/api/home'
import { hasPermPage } from '@/utils/permission';
export default {
    name: 'TaskInfo',
    mixins: [table],
    props:{
        userId:{
            type:String | Number,
            default:''
        }
    },
    data() {
        return {
            activeKey: 'newList',
            tabs: [
                {
                    label: '新的任务',
                    key: 'newList'
                },
                {
                    label: '已执行',
                    key: 'doneList'
                }
            ],
            columns: taskCoulumns,
            newList:[],
            doneList:[],
            list:[]
        };
    },
    created(){
        this.getTaskList();
    },
    methods: {
        handleClickRow(info){
            let {theme,schemeId,correctId=''} = info;
            // 施工审批 施工整改
            if(theme.indexOf('审批')>=0){
                let ishas = hasPermPage('/supervision/approve/index');
                if(!ishas){
                    this.$router.push({
                        path:`/supervision/approve/index`,
                        query:{
                            id:schemeId
                        }
                    })
                }else{
                    this.$message.error('暂无权限')
                }
            }else if(theme.indexOf('整改')>=0){
                let ishas = hasPermPage('/supervision/rectify/index');
                if(!ishas){
                    this.$router.push({
                        path:`/supervision/rectify/index`,
                        query:{
                            id:correctId
                        }
                    })
                }else{
                    this.$message.error('暂无权限')
                }
            }else if(theme=='施工方案'){
                let ishas = hasPermPage('/construction/scheme/index');
                if(!ishas){
                    this.$router.push({
                        path:`/construction/scheme/index`,
                        query:{
                            id:schemeId
                        }
                    })
                }else{
                    this.$message.error('暂无权限')
                }
            }else if(theme=='施工计划执行'){
                let ishas = hasPermPage('/supervision/list/index');
                if(!ishas){
                    this.$router.push({
                        path:`/supervision/list/index`,
                        query:{
                            id:schemeId
                        }
                    })
                }else{
                    this.$message.error('暂无权限')
                }
            }
        },
        switchTab(item) {
            let { key } = item;
            this.activeKey = key;
            this.list = [...this[key]]
        },
        async getTaskList(){
            this.loading = true;
            try{
                let userId = this.userId;
                let res = await remoteTaskList({userId});
                let {data} = res;
                data.map(item=>{
                    let {status,list} = item;
                    if(status=='新的任务'){
                        this.newList = list;
                    }else{
                        this.doneList = list;
                    }
                })
                this.list = [...this.newList];
            }finally{
                this.loading = false;
            }
        }
        // async onScroll(target) {
        //     console.log(target);
        //     return false;
        //     // 如果滚动到底部，且没有正在加载下一页数据，则执行 loadNextPage 方法
        //     let length = this.list.length;
        //     if (target.scrollTop + target.clientHeight >= (target.scrollHeight - 30) && !this.loading && (length < this.total)) {
        //         this.loading = true;
        //         try {
        //             let res = await this.loadNextPage();
        //         } finally {
        //             this.loading = false;
        //         }
        //     }
        // },
        // async loadNextPage() {
        //     try {
        //         let res = await remoteList(this.form);
        //         this.form.page++;
        //         let { list, total } = res.data;
        //         this.total = total;
        //         this.list = [...this.list, ...list]
        //     } finally {
        //         this.$forceUpdate(); // 强制更新视图
        //     }
        // }
    }
};
</script>
<style lang="scss" scoped>
.table_task {
    height: 100%;
    overflow: hidden;
    &::v-deep .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th,
    &::v-deep .ant-table-placeholder{
        border: none;
    }
    &::v-deep .scrollbar__wrap .scrollbar__view {
        background-color: #fff;
        padding: 0;
    }
    &::v-deep .ant-table-wrapper{
        box-shadow: none;
    }
    &::v-deep .tableCommon-wrapper .ant-table-wrapper {
        box-shadow: none;
    }
}

.task_tab_box {
    margin: 5px 10px;

    .tab {
        margin: 0 10px;
        padding: 10px 0 5px 0;
        font-size: 14px;
        color: #333;
        border-bottom: 3px solid transparent;
        cursor: pointer;

        &.active {
            color: #1a80dc;
            border-bottom-color: #1a80dc;
        }
    }
}
</style>
